<template>
  <div class="warpper-box transferList">
    <a-card>
      <div style="text-align: right;">
        <span style="margin-right: 8px;color: rgba(0, 0, 0, 0.85);">企业:</span>
        <a-select v-model="enterpriseId" @change="enterpriseChange" style="width: 200px;">
          <a-select-option v-for="item in enterpriseData" :key="item.enterpriseId">
            {{ item.name }}
          </a-select-option>
        </a-select>
      </div>
    </a-card>
    <a-card style="margin-top: 10px;">
      <div style="display: flex;justify-content: flex-start;align-items: flex-start;">
        <org-select ref="orgSelect" @on-tree="treeCall"></org-select>
        <span style="display: flex;justify-content: flex-start;align-items: center;margin: 6px 10px 0 0;">
          <span style="flex-shrink: 0;margin-right: 8px;color: rgba(0, 0, 0, 0.85);">员工姓名:</span>
          <a-input placeholder="请输入员工姓名" v-model="name"/>
        </span>
        <span style="margin: 6px 10px 0 0;">
          <a-button type="primary" icon="search" @click="loadTable(true)">搜索</a-button>
          <a-button type="primary" icon="setting" @click="reset">重置</a-button>
          <a-button type="primary" icon="file-excel" @click="quitExport">导出</a-button>
        </span>
      </div>
    </a-card>
    <a-card style="margin-top: 10px;">
      <a-table :columns="table.columns" :data-source="table.loadData" :pagination="table.pagination"
        @change="handleTableChange" rowKey="id">
        <!-- 操作栏-->
        <span slot="action">
          <!-- 编辑模块 | 字段 -->
          <a>调转</a>
        </span>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import store from '@/store'
import OrgSelect from "@/components/human/orgSelect.vue"
import {
  COLUMNS_QUIT
} from "./form"
import {
  OPTION_BLOCK,
  OPTION_INLINE
} from "../base_form"
import {
  getTablePage,
  getQuitExport,
  staffLeaveCancel
} from "@/api/human/relationQuit"
export default {
  name: 'transferList',
  components: {
    OrgSelect,
  },
  data() {
    return {
      table: {
        columns: COLUMNS_QUIT,
        loadData: [],
        pagination: {
          current: 1,
          pageSize: 10,
          total: 0,
          showSizeChanger: true,
					showQuickJumper: true,
          pageSizeOptions: ["10", "20", "50", "100"],
          showTotal: total => `共有 ${total} 条数据`,
        }
      },
      pagination: { current: 1, pageSize: 10 },

      name: "", // 员工姓名
      orgId: "", // 组织id
      enterpriseId: "", // 企业id
      enterpriseData: [], // 客户列表
    }
  },
  filters: {

  },
  mounted() {
    window.addEventListener('keyup', this.keyDown);
  },
  destroyed() {
    window.removeEventListener('keyup', this.keyDown);
  },
  beforeCreate() {
    this.events_form = this.$form.createForm(this, {
      name: 'events_form'
    })
  },
  created() {
    this.getEnterpriseData();
  },
  methods: {
    // 获取企业员工列表
    async loadTable(flag) {
      let params = {};
      if (flag) {
        this.table.pagination.current = 1;
        this.table.pagination.pageSize = 10;
      }
      params.name = this.name;
      params.enterpriseId = this.enterpriseId;
      params.orgId = this.orgId;
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      const { code, data } = await getTablePage(params);
      if (code === '1') {
        this.table.loadData = data.content;
        this.table.pagination.total = data.total || 0;
      }
    },
    handleTableChange(pagination) {
      this.table.pagination.current = pagination.current;
      this.table.pagination.pageSize = pagination.pageSize;
      this.loadTable(false);
    },
    // 导出企业离职员工
    quitExport() {
      let params = {};
      params.enterpriseId = this.enterpriseId;
      params.name = this.name;
      params.orgId = this.orgId;
      params.pageNum = this.table.pagination.current;
      params.pageSize = this.table.pagination.pageSize;
      getQuitExport(params).then(res => {
        const blob = new Blob([res]);
        const fileName = '企业离职员工列表.xlsx';
        const elink = document.createElement('a'); // 创建a标签
        elink.download = fileName;
        elink.style.display = 'none';
        elink.href = URL.createObjectURL(blob);
        document.body.appendChild(elink);
        elink.click(); // 点击下载
        URL.revokeObjectURL(elink.href); // 释放URL 对象
        document.body.removeChild(elink); // 释放标签
      })
    },
    // 放弃离职
    async removeLeave(row) {
      let params = {
        ids: [row.leaveId]
      };
      const { code } = await staffLeaveCancel(params);
      if (code === '1') {
        this.$message.success('操作成功')
        this.loadTable(true);
      }
    },
    // 获取客户员工
    async getEnterpriseData() {
      this.enterpriseData = await store.dispatch('department/getAllEnterprise');
      this.enterpriseChange(this.enterpriseData[0].enterpriseId);
    },
    // 组织回调
    treeCall(info) {
      this.orgId = info.key;
    },
    // 选择客户
    enterpriseChange(value) {
      this.enterpriseId = value;
      this.$refs.orgSelect.add(value);
      this.loadTable(true);
    },
    reset() {
      this.$refs.orgSelect.reset();
      this.orgId = "";
      this.name = "";
      this.loadTable(true);
    }
  }
}
</script>
<style lang="less">
.transferList {
  width: 100%;
}
</style>